<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <link href="../css/qs.css" rel="stylesheet" type="text/css" />
    <link href="../css/qs_ui.css" rel="stylesheet" type="text/css" />
    <link href="../css/quote2_dli.css" rel="stylesheet" type="text/css" />
    <link href="uidemo.css" rel="stylesheet" type="text/css" />
    <style>
        #test2 .rtq-checkbox{padding-left:16px;background:url(http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/checkbox.png) -2px -4px no-repeat;}
        #test2 .rtq-checkbox:hover{background-position:-2px -29px;}
        body #test2 .rtq-checkbox-on{background-position:-2px -54px;}
        body #test2 .rtq-checkbox-on:hover{background-position:-2px -79px;}
    </style>
</head>
<body class="ifm-body">

<div class="ifm-panel">
    <h2 class="til">Util.SelectButton, Util.ButtonGroup</h2><br />
    
    <h2 class="til">Radio Button Group</h2>
    <div id="test" class="clearfix" style="padding:10px;"></div>
    <br />
    <h2 class="til">Radio Button Group - Vertical</h2>
    <div id="test4" class="clearfix" style="padding:10px;"></div>
    <br />
    <h2 class="til">CheckBox</h2>
    <div id="test3" class="clearfix" style="padding:10px;"></div>
    <br />
    <h2 class="til">CheckBox Group - Custom style</h2>
    <div id="test2" class="clearfix" style="padding:10px;"></div>
    <br />
    <h2 class="til">CheckBox Group - Vertical - Disable</h2>
    <div id="test5" class="clearfix" style="padding:10px;"></div>
</div>
       
</div>

<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../js/ui/util.js" type="text/javascript"></script>

<script language="javascript" type="text/javascript">
var data = [{txt:'ABC1',val:'abc1'},{txt:'ABC2',val:'abc2'},{txt:'ABC3',val:'abc3'},{txt:'ABC4',val:'abc4'},{txt:'ABC5',val:'abc5'}]

var t1 = new Util.ButtonGroup($('#test'), data, {
    onClick: function(v){
    }
});

var t2 = new Util.ButtonGroup($('#test2'), data, {
    onClick: function(v){
        alert(t2.getValue());
    }
},{type:'checkbox'});
t2.btns['abc2'].select();
t2.btns['abc3'].select();

var t3 = new Util.SelectButton($('#test3'), {txt:'ABC1',val:'abc1'}, {
    onClick: function(v){
    }
},{type:'checkbox'});

var t4 = new Util.ButtonGroup($('#test4'), data, {
    onClick: function(v){
    }
}, {vertical:true});
t4.btns['abc2'].select();

var t5 = new Util.ButtonGroup($('#test5'), data, {
    onClick: function(v){
    }
}, {type:'checkbox', vertical:true});
t5.disable(true);
</script>
</body>
</html>
